/**
 * 生日歌音频对象
 * @type {HTMLAudioElement}
 */
const birthdaySong = new Audio('你的音乐链接');

/**
 * 初始化页面交互
 */
document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const errorModal = document.getElementById('errorModal');

    /**
     * 显示错误弹窗
     */
    function showErrorModal() {
        errorModal.classList.add('show');
    }

    /**
     * 关闭错误弹窗
     */
    window.closeModal = function() {
        errorModal.classList.remove('show');
    }

    /**
     * 处理登录表单提交
     */
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();

        try {
            const response = await fetch('http://localhost:9595/api/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    userAccount: username,
                    userPassword: password
                })
            });

            const data = await response.json();

            if (data.code === 10000) {
                // 登录成功
                localStorage.setItem('token', data.data.token);
                showSuccessAnimation();

                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 750);
            } else {
                // 显示错误弹窗
                showErrorModal();
            }
        } catch (error) {
            // 网络错误也显示相同的弹窗
            showErrorModal();
            console.error('登录错误:', error);
        }
    });

    /**
     * 显示成功动画
     */
    function showSuccessAnimation() {
        const loginBtn = loginForm.querySelector('.login-btn');
        loginBtn.innerHTML = '<span class="btn-icon">🎉</span> 惊喜准备中...';
        loginBtn.disabled = true;
        loginForm.classList.add('success');
    }
});

/**
 * 创建星星效果
 */
function createStars() {
    const container = document.querySelector('.container');
    for (let i = 0; i < 50; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.cssText = `
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            left: ${Math.random() * 100}%;
            top: ${Math.random() * 100}%;
            animation: twinkle ${Math.random() * 2 + 1}s infinite;
        `;
        container.appendChild(star);
    }
}

/**
 * 移除所有星星
 */
function removeStars() {
    const stars = document.querySelectorAll('.star');
    stars.forEach(star => star.remove());
}

/**
 * 创建礼花效果
 */
function createConfetti() {
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeead'];
    const container = document.querySelector('.container');
    
    for (let i = 0; i < 30; i++) {
        const confetti = document.createElement('div');
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        confetti.className = 'confetti';
        confetti.style.cssText = `
            position: absolute;
            width: 10px;
            height: 10px;
            background: ${color};
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: confetti-spread ${Math.random() * 2 + 1}s ease-out forwards;
        `;
        
        container.appendChild(confetti);
        
        // 动画结束后移除礼花
        setTimeout(() => confetti.remove(), 3000);
    }
}

// 添加星星动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes twinkle {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
`;
document.head.appendChild(style);

// 添加礼花动画样式
const confettiStyle = document.createElement('style');
confettiStyle.textContent = `
    @keyframes confetti-spread {
        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 1;
        }
        100% {
            transform: translate(
                ${() => Math.random() * 200 - 100}px,
                ${() => Math.random() * 200 - 100}px
            ) scale(1);
            opacity: 0;
        }
    }
`;
document.head.appendChild(confettiStyle); 